import React from 'react';
import {
    DesktopOutlined,
    FileOutlined,
    TeamOutlined,
    UserOutlined,
    AppstoreAddOutlined,
    DeploymentUnitOutlined,
    SortAscendingOutlined,
    InteractionOutlined,
    TableOutlined,
    // MenuUnfoldOutlined,
    // MenuFoldOutlined
} from '@ant-design/icons';
import { Breadcrumb, Layout, Menu } from 'antd';
import logo from './../logo/240x240.svg'

import { Outlet, NavLink } from 'react-router-dom';

const { Header, Content, Footer, Sider } = Layout;

//返回菜单对象
const getItem = (label, key, navLinkTo, icon, children) => {
    if (navLinkTo) {
        label = <NavLink to={navLinkTo}> {label} </NavLink>
    }
    if (children) {
        return {
            key,
            icon,
            children,
            label
        }
    }
    return {
        key,
        icon,
        label
    }
}
//生成菜单数组
const items = [
    getItem('大屏', '1', '/', <DesktopOutlined />),
    getItem('用户管理', 'userid', null, <UserOutlined />, [
        getItem('用户', '2'),
        getItem('角色', '3'),
        getItem('日志', '4'),
    ]),
    getItem('Class Hook Demo', 'propsdemo', null, <DeploymentUnitOutlined />, [
        getItem('CLass Demo', '5', null, <SortAscendingOutlined />, [
            getItem('class父调子函数', '5-1'),
            getItem('class子调父函数', '5-2'),
        ]),
        getItem('Hook Demo', '6', null, <InteractionOutlined />, [
            getItem('Hook父调子函数', '6-1', '/antd/layoutDemo/fatherFun'),
            getItem('Hook子调父函数', '6-2', '/antd/layoutDemo/sonFun'),
            getItem('Table+Modal', '6-3', '/antd/layoutDemo/tableAddModal', <TableOutlined />),
        ]),
        getItem('Other', '7'),
    ]),
    getItem('Ant Demo', 'antdemo', null, <TeamOutlined />, [
        getItem('Table演示', '8', '/antd/layoutDemo/table'),
        getItem('Model演示', '9', '/antd/layoutDemo/modalAddFrom'),
        getItem('日历框演示', '10', '/antd/layoutDemo/datePickerDemo'),
        getItem('Echarts演示', 'sub2-2', null, <AppstoreAddOutlined />, [
            getItem('散点图', '11', '/antd/layoutDemo/echartsViewGaugeDemo')
        ])
    ]),
    getItem('文件管理', '12', '/antd/layoutDemo/useStateExample', <FileOutlined />)
];

//得到面包屑的父节点

const getMenuParent = (arr, keyValue) => {
    let jsonArray = [];
    for (let k in arr) {
        if (arr[k].key === keyValue) {
            jsonArray.unshift(arr[k].children)
            let object = { label: arr[k].label, key: arr[k].key }
            jsonArray.unshift(object)
            return jsonArray
        }
    }
}

//==================================================================

const itemsBreadcrumb = [
    { label: '点击完菜单后', key: 'item-1' },
    { label: '查看控制台', key: 'item-2' }
];
const extraBreadcrumbItems = itemsBreadcrumb.map((_, index) => {
    return (
        <Breadcrumb.Item key={_.key}>
            {_.label}
        </Breadcrumb.Item>
    )
});

class LayoutDemo extends React.Component {

    state = {
        collapsed: false,
    }

    // 面包屑
    handerMenuClick = (e) => {
        sessionStorage.setItem("token", "aaaaaaaaaaaaaaaaaaaa");
        let numSize = e.keyPath.length
        // console.log(e.domEvent.target.innerText, e.key)
        itemsBreadcrumb.splice(0, itemsBreadcrumb.length);
        //判断是否有父节点
        if (numSize > 1) {
            let itemsTem = items;
            for (let i = numSize - 1; i > 0; i--) {
                //得到自身和所有父节点的key
                const keyValue = e.keyPath[i];
                const arrTem = getMenuParent(itemsTem, keyValue)
                // console.log(arrTem)
                itemsTem = arrTem[1]
                itemsBreadcrumb.push(arrTem[0])
            }
        }
        itemsBreadcrumb.push(
            { label: e.domEvent.target.innerText, key: e.key }
        )
        console.log('面包屑数据：', itemsBreadcrumb)

        this.setState({

        })
    }

    setCollapsed = (value) => {
        this.setState({
            collapsed: value
        })
    }

    render() {
        return (
            <>
                <Layout
                    style={{
                        minHeight: '100vh',
                    }}
                >
                    <Header
                        className="site-layout-background"
                        style={{
                            position: 'sticky',
                            top: 0,
                            zIndex: 1,
                            paddingLeft: 16,
                            paddingTop: 4,
                            height: 50,
                            color: '#f5f5f5'
                        }}
                    >
                        <img src={logo} alt="" style={{ width: 40, height: 40, float: 'left' }} />
                        <div style={{ float: 'left', marginLeft: 10, marginTop: -5, fontSize: 14, fontWeight: 'bold' }}> Admin 管理</div>
                    </Header>
                    <Layout className="site-layout">
                        <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.setCollapsed} collapsedWidth={60}>
                            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} onSelect={this.handerMenuClick} />
                        </Sider>
                        <Layout>
                            <Content style={{ margin: '0 16px', color: '#000' }} >
                                <Breadcrumb style={{ margin: '16px 0', }} >
                                    {extraBreadcrumbItems}
                                </Breadcrumb>
                                <div
                                    className="site-layout-background"
                                    style={{
                                        // padding: 24,
                                        minHeight: 360,
                                        height: '100%'
                                    }}
                                >
                                    <Outlet></Outlet>
                                </div>
                            </Content>
                            <Footer
                                style={{
                                    textAlign: 'center',
                                }}
                            >
                                Ant Design ©2022 Created by Ant UED
                            </Footer>
                        </Layout>
                    </Layout>
                </Layout>
            </>
        )
    }
}

export default LayoutDemo;